Gatsby.js — Display a Single Image

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Get and Display a Single Image

We can get and display a single image with Gatsby.

We use the gatsby-image to get and add an image.

To install the packages required packages, we run:

npm i gatsby-plugin-sharp gatsby-transformer-sharp

To do this, we write:

gatsby-config.js

const path = require('path');

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

Then we can get the image on our page by writing:

src/pages/index.js

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "laptop.jpg" }) {
        childImageSharp {
          fluid {
            base64
            aspectRatio
            src
            srcSet
            sizes
          }
        }
      }
    }
  `)

  return (
    <div>
      <Img fluid={data.file.childImageSharp.fluid} alt="laptop" />
    </div>
  )
}
export default IndexPage

We specify that we want to get laptop.jpg in our GraphQL query.

Then we get the fields and put them into the Img component in the JSX.

We can simplify this by writing:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "laptop.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 200, quality: 75) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <div>
      <Img
        fluid={data.file.childImageSharp.fluid}
        alt="laptop"
        style={{ border: "2px solid purple", borderRadius: 5, height: 250 }}
      />
    </div>
  )
}
export default IndexPage

We simplify the query with the GatsbyImageSharpField fragment, which is equivalent to what we have in the previous example.

And we add the style into our Img component.

We can set the fluid prop to force an aspect ratio by overriding the aspectRatio field:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "laptop.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 200, quality: 75) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return (
    <div>
      <Img
        fluid={data.file.childImageSharp.fluid}
        alt="laptop"
        fluid={{
          ...data.file.childImageSharp.fluid,
          aspectRatio: 1.6,
        }}
      />
    </div>
  )
}
export default IndexPage

Also, we can set the image with a fixed-width with the following query:

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      file(relativePath: { eq: "laptop.jpg" }) {
        childImageSharp {
          fixed(width: 250) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  `)

  return (
    <div>
      <Img fixed={data.file.childImageSharp.fixed} alt="laptop" />
    </div>
  )
}
export default IndexPage

We have the fixed field with the width set to 250.

So the image will be displayed with 250px width.

Conclusion

We can display a single image in various ways by using various queries with Gatsby.